<template>
  <div class="service_message">
    <div>
      <el-form ref="allUserform" label-width="50" inline :model="allUserform">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="allUserform.name" placeholder="请输入姓名" style="width:150px" clearable />
        </el-form-item>
        <el-form-item label="省份" prop="prov">
          <el-input v-model="allUserform.prov" placeholder="请输入省份" style="width:150px" clearable />
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="allUserform.city" placeholder="请输入城市" style="width:150px" clearable />
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-input v-model="allUserform.area" placeholder="请输入地区" style="width:150px" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="searchBtn" @click="allUsersearch()">
            查询
          </el-button>
          <el-button class="resetBtn" @click="resetallUserSearch()">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btnGroup">
      <el-button class="resetBtn" @click="sendMsgShow('1')">
        全部发送
      </el-button>
      <el-button class="resetBtn" @click="sendMsgShow('2')">
        选择发送
      </el-button>
    </div>
    <div class="table-container">
      <el-table :data="adviceList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <!-- <el-table-column label="序号" align="center" prop="id" /> -->
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="省份" align="center" prop="prov" />
        <el-table-column label="城市" align="center" prop="city" />
        <el-table-column label="地区" align="center" prop="area" />
        <el-table-column label="详细地址" align="center" prop="address" />
      </el-table>
      <custom-page
        ref="allUserPage"
        :total="allUsertotal"
        @getList="getAllUserInfo"
      />
    </div>
    <el-dialog
      :modal-append-to-body="false"
      title="输入发送内容"
      class="dialogClass"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" style="width:350px;margin: 0 auto;">
        <el-form-item prop="content" label="短信内容">
          <el-input v-model="dynamicValidateForm.content" type="textarea" :rows="2" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label-width="0px" style="margin: 8px auto;text-align: center">
          <el-button type="primary" class="login-btn" @click="sendEmail">发送
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getRealList, sendAllUser } from '@/api/user'
import customPage from '@/components/customPage'
export default {
  components: { customPage },
  data() {
    return {
      activeName: 'set',
      sms_num: 0,
      sms_automatic: 0,
      shoper_sms: [],
      user_sms: [],
      smsType: 1,
      selectId: '',
      multiple: false,
      searchForm: {
        mobile: '',
        template_id: '',
        send_status: '',
        create_time: ''
      },
      templateList: [],
      tableData: [],
      total: 0,
      allUsertotal: 0,
      allUserform: {},
      multipleSelection: [],
      adviceList: [],
      dynamicValidateForm: {
        content: ''
      },
      sendType: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    getAllUserInfo() {
      const { page, pageSize } = this.$refs.allUserPage
      getRealList({ page, pageSize, ...this.allUserform }).then(res => {
        const { data, total } = res
        this.adviceList = data || []
        this.allUsertotal = total || 0
      })
    },
    allUsersearch() {
      this.getAllUserInfo()
    },
    resetallUserSearch() {
      this.allUserform = []
      this.getAllUserInfo()
    },
    sendMsgShow(type) {
      this.sendType = type
      if (type == '2' && this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: '发送对象不能为空！！！',
          type: 'error'
        })
      } else {
        this.dialogVisible = true
      }
    },
    sendEmail: function() {
      this.$refs['dynamicValidateForm'].validate((valid) => {
        if (valid && this.dynamicValidateForm.content != '') {
          var data = null
          if (this.sendType == '1') {
            data = {
              content: this.dynamicValidateForm.content
            }
          } else {
            const aaa = this.multipleSelection.map(k => { return { 'phone': k.phone } })
            debugger
            data = {
              users: aaa,
              content: this.dynamicValidateForm.content
            }
          }
          sendAllUser(data).then((res) => {
            console.log(res)
            var msg = '发送成功：' + res.successful + '个，发送失败：' + res.error + '个'
            this.dynamicValidateForm.content = ''
            this.dialogVisible = false
            this.$notify({
              title: '发送短信',
              message: msg,
              duration: 0
            })
          })
        } else {
          this.dynamicValidateForm.content = ''
          console.log('error send!!')
          return false
        }
      })
    },

    changeNumberInput(value) {
      const pattern = /^[1-9][0-9]*$/
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.searchForm.mobile = ''
      }
    },
    openSet(id, type) {
      if (!this.$hasMethod('#set') && id) {
        return
      }
      if (id) {
        this.multiple = false
        this.selectId = id + ''
        this.smsType = 1
      } else {
        this.multiple = true
        this.selectId = ''
        this.smsType = type
      }
      this.$refs.setDialog.dialogVisible = true
    },
    // 去购买
    toBuy() {
      this.$refs.buyDialog.dialogVisible = true
    },
    // 自动充值
    autoRecharge() {
      // if (this.sms_automatic == 1) {
      //   // 关闭
      //   this.$confirm('确认要关闭自动充值吗?', '关闭自动充值', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消'
      //   }).then(() => {
      //     autoRecharge({
      //       baseline: '',
      //       recharge_num: '',
      //       recharge_type: 2,
      //       sms_remind: ''
      //     }).then(res => {
      //       this.getData()
      //     })
      //   }).catch(() => { })
      // } else {
      //   // 开启
      //   this.$refs.rechargeDialog.dialogVisible = true
      // }
    },
    // 购买记录
    checkRecords() {
      this.$router.push({ name: 'serviceMessageRecord' })
    },
    handleClick(tab, event) {
      this.getData()
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getData()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        mobile: '',
        template_id: '',
        send_status: '',
        create_time: ''
      }
      this.getData()
    },
    getData() {
      this.getAllUserInfo()
    },
    getSelect() {
      // getSmsTemplate().then(res => {
      //   this.templateList = res || []
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 260px;
  .el-divider--horizontal {
    margin: 20px 0;
  }
}
.left {
  padding: 10px;
  background-color: #f5f5f5;
  & > p {
    line-height: 40px;
    margin-right: 60px;
  }
}
.right {
  width: 345px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  p {
    line-height: 23px;
  }
  span {
    font-size: 16px;
  }
  .el-tag {
    color: #ff8500;
    margin-top: 10px;
    font-size: 14px;
  }
}
.record_header {
  padding-left: 15px;
  border-left: 3px solid $mainBlue;
  margin: 20px 0;
}
.sms_item {
  width: 100%;
  height: 125px;
  padding: 15px;
  background: #f5f5f5;
  margin-bottom: 20px;
  .header {
    border-bottom: 1px dashed #cdcdcd;
    padding: 0 0 15px;
    margin-bottom: 10px;
  }
  .tag {
    padding: 3px;
    border: 1px solid #ff4146;
    border-radius: 3px;
    color: #ff4146;
    font-size: 12px;
    border-radius: 3px;
    min-width: 32px;
    box-sizing: border-box;
  }
}
.open_icon {
  padding: 5px;
  font-size: 12px;
  color: #ffffff;
  border-radius: 3px;
  min-width: 46px;
  box-sizing: border-box;
  &.red {
    background: #ff4146;
  }
  &.green {
    background: #4ccb86;
  }
}
@media screen and (max-width: 1420px) {
  .left > p {
    line-height: 1.8;
  }
  .sms_item {
    height: 150px;
  }
}
.status_icon::before {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff4146;
  margin-right: 6px;
}
.status_icon.success::before {
  background-color: #4ccb86;
}
</style>
